<template>
	<view class="u-wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">猫咪百科</block>
		</cu-custom>


<!-- 侧边栏 -->
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in title" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
				 :data-current="index" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>
			
<!-- 右边内容 -->
			
			<block v-for="(item,index) in title" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current==index">
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<text class="text-them">{{item.name}}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
									<text class="text-black text-bold">{{item1.notice}}</text>
									<view class="item-menu-name margin-top-sm text-abc">{{item1.name}}</view>
								</view>
								<view style="height: 200rpx;"></view>
							</view>
							
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<script>
	// import classifyData from "@/common/classify.data.js";
	export default {
		data() {
			return {
				title: [
					{
						name: '撸猫',
						foods: [{
								notice: '注意事项',
								name: `多数流浪猫对人类较为警惕(不愿意与人类亲近)，在校内偶遇流浪猫时，,
								可在小程序中通过花色查找这只猫的基本信息，
								性格描述为“可摸可抱/可摸不可抱/不可抱不可摸”时可尝试接近，
								但不要随便去接触，有被抓伤的风险。`,
							},
							{
								notice: '疫苗',
								name: `校内的流浪猫全都没有打过疫苗，若在与流浪猫互动时不小心被咬伤或挠伤，,
								请前往医院挂号注射疫苗，并遵医嘱，具体流程请关注医院信息。`,
							},
							{
								notice: '猫的行为',
								name: '一般来说，猫同人一样，不同的行为表现反映出心情也不同。我们将其中简单表意较明确的一些摘录出来。',
								
							},
							{
								notice: '① 不断喵喵叫',
								name: '猫不断地叫一般代表某种诉求，比如想吃东西，想上厕所，需要玩耍等，其多会辅以肢体语言指示自己的需要。',
							},
							{
								notice: '② 咕噜声',
								name: `是满足或疗伤的信号。猫咪们总在它们开心的时候发出咕噜声，甚至在它们吃东西的时候也这样。,
								另一方面，当猫咪受伤或生病时，也会发出这样的声音。据研究表明，这一声音有助于猫咪组织再生。
								因此，如果猫咪反常的持续发出呼噜声，需要考虑生病可能。`,
							},
							{
								notice: '③ 飞机头',
								name: '耳朵向后，向两边倒，贴近头部，生气，愤怒，受到了惊吓。',
							},
							{
								notice: '④ 水平或低垂的摇动尾巴',
								name: '表示愤怒，准备攻击。',
							},
							{
								notice: '⑤ 毛发竖起',
								name: '生气，收到惊吓。亦有少量猫兴奋时会出现此举动。',
							},
							{
								notice: '⑥ 缓慢眨眼',
								name: `缓慢眨眼是猫语言中的“我爱你”。当需要对猫示好的时候，,
								也可以对猫缓慢眨眼，约每次睁眼一两秒，闭眼两三秒。
								一般数次之后即有效果，可使猫平静或不再注意你。`,
							},
							{
								notice: '其他',
								name: `与猫玩耍应注意猫不喜欢被抚摸爪子，腹部，下体等处，这会增加它们的不安。
								较安全的是抚摸额头，背部，脖子等部位。特别是下巴，
								由于猫的爪子不太容易够到下巴，所以帮它们挠挠下巴，猫一般都会很开心。`,
							},
						]
					},
					{
						name: '喂食',
						foods: [
							{
								notice: '注意事项',
								name: '若您在校内偶遇流浪猫，切记人类的食物不要喂给流浪猫!',
							},
							{
								notice: '● 有毒食物',
								name: '巧克力、葡萄制品、大葱、洋葱等食品对猫有毒，可能会引起急性肾衰竭，切不可以喂食!',
							},
							{
								notice: '● 不适合食物',
								name: `火腿肠和牛奶并不适合猫咪，会引起肠胃反应，造成腹泻等状况；
								酸性的各类水果、香辛料制的肉类、乌贼等海产也均不适合猫咪食用。`,
							},
							{
								notice: '● 可投喂食物',
								name: '猫粮、猫罐头、以及一些猫咪零食(具体种类见下)',
							},
							{
								notice: '① 猫粮',
								name: `平时说的猫粮主要指干猫粮，是最常见的猫食物，作为猫的主要食物来源可以给猫提供营养。
								而水煮鸡胸肉、鸡肝之类清淡食物也非常适合为猫咪加餐。`,
							},
							{
								notice: '② 罐头',
								name: `罐头主要是一些肉类的混合物，虽然不及鲜肉新鲜美味，但较为简便，是一种常见的肉类补充物质。
								不过需要注意的是猫罐头分为两种，主粮罐与补充罐(或叫零食罐、附加罐等)。
								补充罐不能代替猫粮，其在营养上有所不足。
								大品牌的主粮罐可以作为主粮使用，
								小品牌的大多宣称自己是主粮罐但是实际.上并未达到标准，因此不建议使用。`,
							},
							{
								notice: '③ 小吃',
								name: `较为常见的小吃有妙鲜包、鲜封包、猫布丁等，里面包含一些肉块和小块鱼虾之类，
								比罐头差了许多，一般用于奖励和行为训练，不建议长期使用。
								还有肉干肉条和鸡胸肉等封装的肉类，猫也很喜欢。`,
							},
							{
								notice: '● 其他',
								name: `需要介绍的还有猫麦草和猫薄荷。`,
							},
							{
								notice: '① 猫麦草',
								name: `猫麦草可以提供一些粗纤维可以帮助排出毛球、缓解肠胃不适等好处。`,
							},
							{
								notice: '② 猫薄荷',
								name: `猫薄荷可以引起猫咪兴奋，也被称为“猫咪毒品”，不过不会成瘾，
								一般用来与猫玩耍时使用，但有些猫兴奋后会表现出更强烈的攻击性，需要小心。
								另外需要注意猫薄荷可能引起猫咪的轻度幻觉，因此需要在安全环境下使用，
								同时不建议长期频繁使用。`,
							},
							{
								notice: '● 关于喂食幼猫',
								name: `不建议给半岁以下的幼猫喂食肉食。幼猫肠胃功能较弱，过早开始吃肉食容易引起拉稀。
								如需进行行为训练,建议使用干粮或者奶布丁。`,
							},
						]
					},
					{
						name: '疾病',
						foods: [
							{
								notice: '● 口炎',
								name: `通常指代那些病变范围广泛、反复发作的口腔炎症病变。
								口炎会导致患猫进食困难、精神状态改变、体重减轻，严重时十分影响猫咪的生活质量。
								口炎的病因较为复杂，牙结石、病毒(比如杯状病毒、猫瘟病毒、白血病病毒、猫艾滋病毒等)、细菌、免疫低下，
								都可能导致口炎，主要表现有流口水，口腔溃疡，厌食，而厌食导致缺乏营养，加速病情恶化，是老年流浪猫中的常见病。
								目前较为成功的治疗都是手术治疗，然而，受限于资金、寄养资源和猫的亲人程度，
								不亲人猫通常难以进行手术治疗，亲人猫最理想的情况是能找到合适的领养人来照顾它。`,
							},
							{
								notice: '● 感冒',
								name: `较轻时症状有打喷嚏，咳嗽，眼角堆积眼屎等，这时可通过喂食阿莫西林治疗，
								成猫一天半颗，幼猫可减为1/4颗。若为很小的奶猫，或症状发展出发烧、食欲不振、口腔溃疡、眼底充血应及时送医。`,
							},
							{
								notice: '● 外伤',
								name: `猫咪有时由于互相打斗，跌伤等情况，会出现小的穿刺型创口，这些小伤不需要送医院治疗，
								可使用可鲁喷在伤口上防止发炎和感染，即可缓慢自愈。而当外伤严重到有生命危险时应及时送医或联系科大猫咪协助送医。`,
							},
							{
								notice: '● 猫癣',
								name: `症状为浑身瘙痒，经常蹭各种东西，在腹部、 背部、头后部、颈部等区域出现圆形或椭圆形的癍(耳螨可能导致耳根下方和脖子处整片的秃，需加以区分)。
								猫癣可传染人，人应避免和患有猫癣的猫直接接触，并勤洗手。
								对于寄养中的猫，如果情况不太严重，应在食物中加入维生素B2，让猫晒太阳，人勤洗手;
								如果较为严重，需要遵医嘱使用外用药，喂维生素B2;
								如果上药的效果不好，可能要使用药浴，但操作难度很大。`,
							},
							{
								notice: '● 猫鼻支',
								name: `症状和感冒相似，呼吸声重，喷嚏多,会流眼泪、流鼻涕，眼泪偏黄色。
								(清眼泪，过敏1进灰;黄色眼泪，呼吸道或面部感染;红色眼泪，可能是严重感染)
								需要送医检查，上药，并服用速诺，用量遵医嘱。`,
							},
							{
								notice: '● 眼睛发炎',
								name: `相关疾病(如鼻支)、进灰、撞到或者挠到等原因都有可能导致眼睛发炎。
								症状为流眼泪、出现奇怪的眼屎、忽然大小眼/红肿、出现白翳。如果自然缓解则没有问题;用药遵医嘱。`,
							},
							{
								notice: '● 耳螨',
								name: `症状为经常挠耳朵、甩头，耳朵或脖子掉毛严重，在外耳道中可以看见红色或黑色的分泌物(有油性或干性的)。
								螨虫、真菌、细菌、病毒均可能引起以上症状。
								出现上述症状时，首先使用耳漂(此药不会刺激致病物的繁殖) ;
								如果情况较严重，则使用耳漂+耳肤灵(都是非剌激性的)。`,
							},

						]
					},
					{
						name: '绝育',
						foods: [
							{
								notice: '● 调和矛盾',
								name: `绝育后的流浪猫攻击性一般会下降,且不再有长时间的叫春等行为。也在一定程度上调和了人与猫的矛盾。`,
							},
							{
								notice: '● 延长寿命',
								name: `有研究表明，不绝育的流浪猫平均寿命不足3年，而绝育的流浪猫平均寿命则大幅上升。
								造成这种差别的原因有很多。其中一个就是流浪猫生存环境恶劣，母猫难产、幼猫早天发生概率很高，拉低了平均寿命。
								另一个原因在于，过度交配、生育会大幅增加猫的生殖系统病变的概率，从而导致死亡。`,
							},
							{
								notice: '● 预防病变',
								name: `猫的繁殖能力非常强大，因此对于家养猫，放任其交配显然不合理。
								而如果常年不让猫在发情期交配，则很可能会引起猫生殖系统的病变。因此绝育同样是一个必然的选项。`,
							},
							{
								notice: '● 其他',
								name: `一只家猫的寿命基本稳定在13~18年之间，平均15年。
								而流浪猫由于很多并不是正常死亡，所以其寿命是要远小于此的。
								根据首都爱护动物协会(CAWA)2007年发布的《北京市流浪猫生存状况的调查报告》中显示，未绝育的流浪猫的平均寿命仅有3年，死因多为意外、疾病、难产等。
								已绝育的流浪猫寿命尚无明确文献支持，根据校园内实际记录，一般能达到10年左右。
								根据协会已有的记录，校园内最长寿的流浪猫流浪了12年后被收养，寿命超过15岁，依旧精神矍铄。`,
							},
						]
					},
					{
						name: '其他',
						foods: [
							{
								notice: '● 作者有话说',
								name: `随着校园流浪猫的数量越来越多，有上代繁殖的，也有校园外进入的，
								猫咪的数量管理变得越来越重要，作为普通学生的我们帮助猫咪的能力是有限的，
								尤其是2022年9月23号事件的发生，让我感到既愤怒又悲伤且无奈，
								不过，猫友们也积极采用了各种措施来帮助校园流浪猫，我也想做一些力所能及的事情，帮助到校园流浪猫，
								于是有了这个小程序！❤`,
							},
							{
								notice: '● 关于小程序',
								name: `本小程序非官方组织，目的是想要提升大家对流浪猫的关注度，呼吁同学们保护校园内的流浪猫猫，
								同时推荐大家扫描友情链接中的二维码，加入猫猫大家庭。
								另外如有在校园内发现本图鉴上没有的猫猫，或者是描述不对的地方，
								亦或是关于猫猫之间的关系和故事均可以直接将图片和基本信息发送给QQ群管理员或公众号私信投稿。`,
							},
							{
								notice: '● 使用说明',
								name: `小程序有猫猫百科，猫猫图鉴，日常记录，个人中心等多个模块！`,
							},
							{
								notice: '● 猫猫百科',
								name: `快速科普猫猫相关知识，让你快速了解！如果想了解详细资料，可自行百度。`,
							},
							{
								notice: '● 猫猫图鉴',
								name: `记录校园流浪猫的基本信息，当同学们在偶遇流浪猫时，可以快速查询，了解猫猫信息。`,
							},
							{
								notice: '● 日常记录',
								name: `记录校园流浪猫的日常活动，提高流浪猫的关注度，防止猫猫受到不必要的伤害。`,
							},
							{
								notice: '● 个人中心',
								name: `可查询个人上传的猫猫图鉴与日常记录，并且可以更新个人资料（昵称与头像）。`,
							},
							{
								notice: '● 信息公告',
								name: `公告与公众号的文章同步更新，可快速了解猫猫的情况。`,
							},
						]
					},
				],
				
				// tabbar: classifyData,
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
			}
		},
		computed: {
			
		},
		methods: {
			getImg() {
				return Math.floor(Math.random() * 35);
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if(index == this.current) return ;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({size: true},res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if(!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return ;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}



	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	
	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}
	
	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $them-color-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}
	
	.right-box {
		background-color: rgb(250, 250, 250);
	}
	
	.page-view {
		padding: 16rpx;
	}
	
	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}
	
	.item-title {
		font-size: 30rpx;
		color: $u-main-color;
		font-weight: bold;
		margin: 10rpx 0;
	}
	
	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}
	
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		display: flex;
		align-items: left;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	
	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
	}
</style>
